<template>
	<view class="con">
		<view class="head">
			<view class="head-box">
				<view class="head-box-num">{{dataInfo.length}}</view>
				<view class="head-box-info">拨号</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{success}}</view>
				<view class="head-box-info">已拨通</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #ff0000;" >{{fail}}</view>
				<view class="head-box-info">未拨通</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{I4}}</view>
				<view class="head-box-info">IPv4联网</view>
			</view>
			<view class="head-box">
				<view class="head-box-num" style="color: #00aa00;">{{I6}}</view>
				<view class="head-box-info">IPv6联网</view>
			</view>
		</view>
		
		<view class="admin">
			管理网卡：{{manager.netDevName || '加载中...'}} | 速率：{{manager.speed || '加载中...'}} | ip: {{manager.ip || '加载中...'}}
		</view>
		
		<view class="data-info">
			<view class="data-info-head">
				数据网卡：{{traffic.netDevName || '加载中...'}} | 速率：{{traffic.speed || '加载中...'}} | ip: {{traffic.ip || '加载中...'}}
			</view>
			<view class="data-info-nums">
				共{{dataInfo.length}}条线路
			</view>
			<view class="data-info-title" >
				<view class="vlan">
					PPP网口
				</view>
				<view class="numinfo">
					拨号信息
				</view>
				<view class="close" @tap="delAll">
					拨号结果
				</view>
			</view>
			<view class="data-info-title-line" v-for="(item,index) in dataInfo" :key="index">
				<view class="vlan-line">
					ppp{{item.adslNum}}
				</view>
				<view class="numinfo-line">
					<view class="">vlan_id:{{item.vlanId}}</view>
					<view class="">账号:{{item.account}}</view>
					<view class="">密码:{{item.password}}</view>
					<view class="">网络:{{info.natType}},{{info.province}}{{info.city}}-{{info.isp}}</view>
				</view>
				<view class="close-line" @tap="delAll">
					<view v-if="item.connectStatus=='succeed'" class="" style="color: #00aa00;">{{item.connectStatus=='succeed' ? '已连接': '未连接'}}-{{item.dialStatus =='succeed' ? '已拨通': '未拨通'}}</view>
					<view v-else class="" style="color: #ff0000;"> 未拨通 </view>
					<view v-if="item.connectStatus=='succeed'" style="font-size: 26rpx;"><view>IPv4:{{item.ip}}</view><view style="word-break:break-all;">IPv6:{{item.ipv6}}</view></view>
					<view v-else  style="font-size: 26rpx;">IPv4:</view>
				</view>
			</view>
		</view>
		
		
		<view class="btn-one" @tap="toNumber">调整线路</view>
		<view class="btn-two">同步网卡信息</view>
	</view>
</template>

<script>
	let App = getApp()
	export default {
		data() {
			return {
				dataInfo:[],
				manager:[],
				traffic:[],
				info:[],
				rSelect:'',
				dSelect:'',
				nodeID:'',
				success:0,
				fail:0,
				I4:0,
				I6:0
			}
		},
		
		onLoad(option) {
			this.eid = option.selectID
			this.getInfo()
		},
		
		methods: {
			getInfo(){
				uni.showLoading({
					title:'加载中'
				})
				
				let	num_s = 0;
				let	num_f = 0;
				let	num_s4 = 0;
				let	num_s6 = 0;

				
				this.$api.interfaceApi('dialStatus')({
					eid:this.eid,
					sys:App.globalData.sys
				}).then(res=>{
					uni.hideLoading()
					if(res.code == 200){
						this.dataList = res.data
						for(var i=0;i < res.data.detail.length;i++){
							if(res.data.detail[i]['type'] ==  "manager"){
								this.manager = res.data.detail[i]
								this.dSelect = i
							}
							if(res.data.detail[i]['type'] ==  "traffic"){
								this.traffic = res.data.detail[i]
								this.dataInfo = res.data.detail[i].dialStatusInfo
								this.rSelect = i
								for(var j=0;j<res.data.detail[i].dialStatusInfo.length;j++){
									if(res.data.detail[i].dialStatusInfo[j].dialStatus == 'failed'){
										num_f++;
									}
									
									
									if(res.data.detail[i].dialStatusInfo[j].dialStatus == 'succeed'){
										num_s++;
									}
									
									if(res.data.detail[i].dialStatusInfo[j].connectStatus == 'succeed'){
										num_s4++;
									}
	
									if(res.data.detail[i].dialStatusInfo[j].ipv6ConnectStatus == 'succeed'){
										num_s6++;
									}
		
								}
							}
						}
						this.success = num_s
						this.fail = num_f
						this.I4 = num_s4
						this.I6 = num_s6
						this.info = res.data.info
						this.nodeID = res.data.info.nodeID
					}else{
						uni.showToast({
							title:'获取失败,请联系管理'
						})
					}
				})
			},
			
			toNumber(){
				uni.navigateTo({
					url:'/pages/equipment/update-number?nodeID='+this.nodeID+'&rSelect='+this.rSelect+'&dSelect='+this.dSelect
				})
			},
			
			
			
			
		}
	}
</script>

<style lang="scss">
	.con{
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		
		.head{
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			.head-box{
				padding: 20rpx 0;
				box-sizing: border-box;
				text-align: center;
				
				.head-box-num{
					padding: 20rpx;
					box-sizing: border-box;
				}
				.head-box-info{
					color: #666666;
					font-size: 26rpx;
				}
			}
			
		}
		
		.admin{
			margin-top: 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
		}
		
		.data-info{
			margin-top: 20rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			background-color: #FFFFFF;
			
			.data-info-head{
				padding: 30rpx 20rpx 0 20rpx;
				box-sizing: border-box;
			}
			
			.data-info-nums{
				padding: 0rpx 20rpx 30rpx 20rpx;
				box-sizing: border-box;
			}
			
			.data-info-title{
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				font-weight: bolder;
				background-color: #75cae645;
				.vlan{
					width: 20%;
				}
				.numinfo{
					width: 40%;
				}
				.close{
					width: 40%;
				}
			}
			
			.data-info-title-line:nth-of-type(even){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				
				
				.vlan-line{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-line{
					width: 40%;
				}
				.close-line{
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
			
			.data-info-title-line:nth-of-type(odd){
				display: flex;
				justify-content: space-between;
				padding: 30rpx 20rpx;
				box-sizing: border-box;
				font-size: 26rpx;
				background-color: #75cae645;
				.vlan-line{
					width: 20%;
					display: flex;
					align-items: center;
				}
				.numinfo-line{
					width: 40%;
				}
				.close-line{
					width: 40%;
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}	
		}
		
		.btn-one{
			background-color: #00aaff;
			color: #FFFFFF;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
		
		.btn-two{
			border: 1rpx solid #e0e0e0;
			text-align: center;
			padding: 20rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
	}
</style>
